<template functional>
  <el-card class="msg-warning">
    <div slot="header" class="clearfix el-card-title">
      <span>消息与警告</span>
    </div>
    <div class="card-cont msg_warning-cont">
      <el-row type="flex">
        <el-col>
          <div>
            <el-row type="flex">
              <el-col class="icon-box">
                <!-- <i class="iconfont icon-message" /> -->
                <img src="@/static/newassetsdetail-xing2.png" alt="">
              </el-col>
              <el-col class="p-cont">
                <p>0条</p>
                <p>未读消息</p>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col>
          <div>
            <el-row type="flex">
              <el-col class="icon-box">
                <i class="iconfont icon-jinggao" />
              </el-col>
              <el-col class="p-cont">
                <p>0条</p>
                <p>警告消息</p>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>
<script>
export default {
  name: 'MessageWarning'
}
</script>
<style lang="scss" scoped>
.msg-warning {
  .icon-box {
    width: 100px;
    line-height: 84px;
    .iconfont {
      font-size: 46px;
      vertical-align: middle;
      &.icon-jinggao {
        color: $red;
      }
    }
  }
  .p-cont {
    p {
      margin: 16px 0;
    }
  }
}
</style>
